leaflet.pub
a tool for shared writing and social publishing
awarm.space
1"use client";
2import { Fact, PermissionToken, ReplicacheProvider } from "src/replicache";
3import type { Attribute } from "src/replicache/attributes";
4import { SelectionManager } from "components/SelectionManager";
5import { Pages } from "components/Pages";
6import {
7 ThemeBackgroundProvider,
8 ThemeProvider,
9} from "components/ThemeManager/ThemeProvider";
10import { LeafletFooter } from "./Footer";
11import { EntitySetProvider } from "components/EntitySetProvider";
12import { AddLeafletToHomepage } from "components/utils/AddLeafletToHomepage";
13import { UpdateLeafletTitle } from "components/utils/UpdateLeafletTitle";
14import { useUIState } from "src/useUIState";
15import { LeafletSidebar } from "./Sidebar";
16
17export function Leaflet(props: {
18 token: PermissionToken;
19 initialFacts: Fact<Attribute>[];
20 leaflet_id: string;
21}) {
22 return (
23 <ReplicacheProvider
24 rootEntity={props.leaflet_id}
25 token={props.token}
26 name={props.leaflet_id}
27 initialFacts={props.initialFacts}
28 >
29 <EntitySetProvider
30 set={props.token.permission_token_rights[0].entity_set}
31 >
32 <ThemeProvider entityID={props.leaflet_id}>
33 <ThemeBackgroundProvider entityID={props.leaflet_id}>
34 <UpdateLeafletTitle entityID={props.leaflet_id} />
35 <AddLeafletToHomepage />
36 <SelectionManager />
37 {/* we need the padding bottom here because if we don't have it the mobile footer will cut off...
38 the dropshadow on the page... the padding is compensated by a negative top margin in mobile footer */}
39 <div
40 className="leafletContentWrapper w-full relative overflow-x-scroll snap-x snap-mandatory no-scrollbar grow items-stretch flex h-full pb-4 pwa-padding"
41 id="page-carousel"
42 >
43 {/* if you adjust this padding, remember to adjust the negative margins on page in Pages/index when card borders are hidden (also applies for the pb in the parent div)*/}
44 <div
45 id="pages"
46 className="pages flex pt-2 pb-1 sm:pb-8 sm:pt-6"
47 onClick={(e) => {
48 e.currentTarget === e.target && blurPage();
49 }}
50 >
51 <LeafletSidebar leaflet_id={props.leaflet_id} />
52 <Pages rootPage={props.leaflet_id} />
53 </div>
54 </div>
55 <LeafletFooter entityID={props.leaflet_id} />
56 </ThemeBackgroundProvider>
57 </ThemeProvider>
58 </EntitySetProvider>
59 </ReplicacheProvider>
60 );
61}
62
63const blurPage = () => {
64 useUIState.setState(() => ({
65 focusedEntity: null,
66 selectedBlocks: [],
67 }));
68};